﻿<!DOCTYPE html>
<html>
<head>
<!--
    Copyright (c) Microsoft Corporation

All rights reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.  You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0   

THIS CODE IS PROVIDED *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT.  

See the Apache Version 2.0 License for specific language governing permissions and limitations under the License.
 -->
    <meta charset="utf-8" />
    <title>YetiBowl Climbers</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <script src="/MSAdvertisingJS/ads/ad.js"></script>
    <!-- YetiBowl references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/livetile.js"></script>
    <script src="/js/default.js"></script>
</head>
<body>

    <div id="imageOverlayLandingTemplate" data-win-control="WinJS.Binding.Template">
        <div class="imageOverlayLanding">
            <div class="imageOverlayLandingImageWrap">
                <img class="imageOverlayLandingImage" data-win-bind="src: compos_data_url" />
            </div>
            <div class="imageOverlayLandingOverlay">
                <div class="imageOverlayLandingOverlayText" 
                    data-win-bind="innerText: title">
                </div>
            </div>
        </div>
    </div>

    <div id="contentHost"></div>


    <div id="snappedview">

        <div id="snapview_yeti_data" class="">
            <div class="yeti imageTextListLandingSnap">
                <img class="imageTextListLandingSnapImage" src="/images/default_face.png" data-win-bind="src: profile_pic; style.borderColor: color" />
                <div class="imageTextListLandingSnapText">
                    <p class="win-type-medium" data-win-bind="innerText: title">Yeti</p>
                    <p class="win-type-x-small">Highest Score: <span data-win-bind="innerText: stats.highscore">0</span></p>
                    <p class="win-type-x-small">Hikers Killed: <span data-win-bind="innerText: stats.kills">0</span></p>
                </div>
            </div>
            <hr />
        </div>

        <!-- snap view item template -->
        <div id="imageTextListLandingTemplate" data-win-control="WinJS.Binding.Template">
                <div class="imageTextListLandingSnap">
                    <img class="imageTextListLandingSnapImage" data-win-bind="src: profile_pic; style.borderColor: color"/>
                    <div class="imageTextListLandingSnapText">
                        <p class="win-type-medium" data-win-bind="innerText: title"></p>
                        <p class="win-type-x-small">Reached the summit <span data-win-bind="innerText: stats.wins"></span> times</p>
                        <p class="win-type-x-small">Killed <span data-win-bind="innerText: stats.deaths"></span> times</p>
                    </div>
                </div>
        </div>
        <!-- end snap view item template -->

        <div id="imageTextListLandingSnap" style="border: none" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: DataHikers.filtered.dataSource, itemTemplate: select('#imageTextListLandingTemplate'), layout: { type: WinJS.UI.ListLayout }, selectionMode: 'none' }"></div>
        


    </div><!-- end #snapview -->


    <div data-win-control="WinJS.UI.SettingsFlyout" id="settings_flyout" aria-label="settings flyout" data-win-options="{settingsCommandId:'options',width:'narrow'}" class="win-ui-dark">
        <div class="win-header">
            <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
            <div class="win-label">Game Options</div>
        </div>
        <div class="win-content">
            <div id="audio_option" data-win-control="WinJS.UI.ToggleSwitch" data-win-options="{title:'Audio',checked:true}"></div>
        </div>
     </div>

</body>
</html>
